<link rel="stylesheet" href="slider.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slider/slides.min.jquery.js"></script>
<script>
    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'images/slider/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
        });
    });
</script>

<div id="container">
    <div id="example">
        <div id="slides">
            <div class="slides_container">
                <a href=""><img src="images/slider/image2.jpg" width="570" height="210" alt="Slide 0"></a>
                <a href=""><img src="images/slider/image0.jpg" width="570" height="210" alt="Slide 1"></a>
                <a href=""><img src="images/slider/image1.jpg" width="570" height="210" alt="Slide 2"></a>
                <a href=""><img src="images/slider/image3.jpg" width="570" height="210" alt="Slide 3"></a> 
                <a href=""><img src="images/slider/image4.jpg" width="570" height="210" alt="Slide 4"></a>
            </div>
            <a href="#" class="prev"><img src="images/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
            <a href="#" class="next"><img src="images/slider/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
        </div>

    </div>
</div>